<template>
  <div>
    <div class="yxp-composition-top">
      <div class="back" id="yxp-commp-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">{{title}}</div>
      <div class="yxp-top-r" >
        <span class="right-text-item" v-if="type != 1" id="yxp-commp-back1" @click="handleList">训练记录</span>
      </div>
    </div>

    <BackTips  :title="tips" :isBack="isBack" :courseId="id" :types="'写作模型'" @close="handleClosed"/>

  </div>
</template>
<script>
// import { printText } from '@/services/composition.js'
import BackTips from './BackTips.vue'
export default {
  name: 'TopBack',
  components: {
    BackTips
  },
  props: {
    title: {
      type: String,
      default: '选择学习词库'
    },
    type: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    },
    courseId: {
      type: Number,
      default: 0
    },
    course_type: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    if (this.type === '8' || this.type === '0') {
      this.tips = '是否退出?'
    }
  },
  data() {
    return {
      isPrint: false,
      isBack: false,
      tips: '是否退出学习？'
    }
  },
  methods: {
    handlePrint() {
      if (!this.isPrint) {
        this.isPrint = true
        setTimeout(() => {
          this.isPrint = false
        }, 60000);
        this.getPrint()
      } else {
        this.$message.error('不能频繁打印哦')
      }
    },
    async getPrint() {
      let params = {
        essay_id: Number(this.id),
        type: 8
      }
      let data = await printText(params)
      if (data.code === 1) {
        this.$message.success('已提交打印，请到管理平台进行打印')
      } else {
        this.$message.error(data.info)
      }
    },
    handleDetail() {
      this.$emit('point', true)
    },
    handleBack() {
      console.log(123)
      this.isBack = true
    },
    handleList() {
      this.$router.push({
        path: '/composition/list',
        query: {
          courseId: this.courseId,
          userId: this.id
        }
      })
    },
    handleClosed(val) {
      this.isBack = val
    }
  }
}
</script>
<style scoped>
.right-text-item {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: #27BFA3;
  margin-left: 60px;
  cursor: pointer;
}
.yxp-composition-top {
  height: 80px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  padding: 0 40px;
  .yxp-top-r {
    color: #27BFA3;
    font-size: 20px;
    font-weight: 400;
    .right-text-item {
      cursor: pointer;
      &:last-child {
        margin-left: 60px;
      }
    }
  }
}
#yxp-commp-back{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 30px;
  height: 27px;
  span{
    display: block;
    width: 30px;
    height: 27px;
    background: url() no-repeat;
    background-size: 100%;
    cursor: pointer;
  }
}
</style>